<template>
  <separate-page-layout>
    <div class="content-container w-web mx-auto">
      <div class="left-panel mt-7">
        <tree-select :treeData="treeData" @node-selected="onNodeSelected"/>
      </div>
      <div class="right-panel mt-10">
        <image-gallery :images="images"/>
      </div>
    </div>
  </separate-page-layout>
</template>

<script lang="ts" setup>
import TreeSelect from "@/components/pageElement/Tree/TreeSelect.vue";
import ImageGallery from "@/components/pageElement/ImageGallery.vue";
import SeparatePageLayout from "@/layouts/SeparatePageLayout.vue";
import type {Ref} from "vue";

interface ImageData {
  updateTime: string;
  pic: string;
}

const response = await api.getTreeStructure();
const treeData = ref();
if (response.code === 1) {
  treeData.value = response.data;
}

const images: Ref<ImageData[]> = ref([]);

const onNodeSelected = async (ids: string[]) => {
  // console.log('Selected ids:', ids);
  const response = await api.getTreeImageList(ids);
  if (response.code === 1) {
    const imagePaths = response.data.map((imageData: ImageData) => ({
      updateTime: imageData.updateTime,
      pic: imageData.pic
    }));

    images.value = await Promise.all(
        imagePaths.map(async (image: ImageData) => ({
          updateTime: image.updateTime,
          pic: await api.getResourceByPath(image.pic)
        }))
    );
  }
};
</script>

<style scoped>
.content-container {
  display: flex;
  gap: 20px;
}

.left-panel {
  width: 250px; /* 固定宽度的左侧面板 */
  flex-shrink: 0;
}

.right-panel {
  flex-grow: 1; /* 右侧面板自适应剩余空间 */
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
</style>
